<template>
  <div style="margin: 20px;">
	<div>
		<!-- @back="goBack"-->
		<!-- <el-page-header content="博客详情页面"></el-page-header> -->
		
		<!--中间内容-->
		<div class="app-container blogs">
			<div class="box">
				<!-- 头部的发博文的信息 -->
				<div class="blog_head">
					<div>
					  <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
					</div>
					<div style="text-align: center; line-height: 2.5em; margin-left: 5px; color: rgb(64,126,221);">
						{{blog_information.user_id}}
					</div>
					<div style="text-align: center; line-height: 2.5em; margin-left: 8px;">
						<i class="el-icon-s-promotion"></i>
					</div>
					<div style="text-align: center; line-height: 2.5em; margin-left: 5px; color: rgb(142,142,142);">
						{{blog_information.time_}}
					</div>
					<div style="text-align: center; line-height: 2.5em; margin-left: 8px;">
						<i class="el-icon-view"></i>
					</div>
					<div style="text-align: center; line-height: 2.5em; margin-left: 5px; color: rgb(142,142,142);">
						{{blog_information.view_}}
					</div>
				</div>
				<!-- 中间的走马灯 -->
				<div class="demo-image__lazy">
					<el-carousel :interval="5000" arrow="always">
					    <el-carousel-item v-for="url in urls" :key="url">
					       <el-image  :src= url  style="height: 300px; width: 100%;"></el-image>
					    </el-carousel-item>
					</el-carousel>
				</div>
				<!-- 分割线 -->
				<el-divider></el-divider>
				<h1 style="text-align: center;">{{blog_information.title}}</h1>
				<div style="text-align: right;margin-right: 0.5em;margin-bottom: 0.5em;">
					<el-tag
					    key="blog_information.resource"
					    type=""
					    effect="plain">
					    {{ blog_information.resource }}
					</el-tag>
					<div></div>
					<el-tag
						v-for="(item,index) in tags"
						style="margin-left: 0.5em;margin-top: 0.5em;"
						:key="index"
						>
						{{item}}
					</el-tag>
				</div>
				<!-- :value="blog_information.content_html" -->
				<!-- class="md" -->
				<mavon-editor
					class="md"
					v-model="blog_information.content_markdown"
					:subfield="false"
					:defaultOpen="'preview'"
					:toolbarsFlag="false"
					:editable="false"
					:scrollStyle="true"
					:ishljs="true"
					codeStyle="monokai-sublime"
				/>
				<br/><br/><br/>
				<!--   赞赏   -->
				<div style="text-align: center;">
					<el-popover
					  placement="top-start"
					  width="230"
					  trigger="click">
					  <div style="display: flex;">
						<el-image
						style="width: 100px; height: 100px;margin: 0 auto;" 
						:src="require('@/assets/image/money_zhifubao.jpg')"
						fit="cover"></el-image>
						<el-image
						style="width: 100px; height: 100px;margin: 0 auto;"
						:src="require('@/assets/image/money_weixin.jpg')"
						fit="cover"></el-image>
					 </div>
					  <el-button slot="reference" type="primary">赞赏</el-button>
					</el-popover>
				</div>
				<!--  这是最后的footer  -->
				<br/><br/>
				<div style="background-color: beige;">
					<el-divider></el-divider>
					<div style="display: flex;">
						<!-- 文字说明  -->
						<div>
							<ul><li>这是一个团体博客展示平台,在这里发博客的都是博主的"好朋友"。</li></ul>
							<ul><li>平台支持多用户,如果你也想在此博客发博文,可向博主申请个人账号。</li></ul>
							<ul><li>该博客平台展示的主要是一些基础性的科普知识。</li></ul>
							<ul><li>博主: 托马斯</li></ul>
							<ul><li>博主公众号: 小趴菜技术猿</li></ul>
							<ul><li>博主小程序: 人情世故记账本</li></ul>
						</div>
						<!-- 联系方式  -->
						<div style="margin: auto auto;">
							<el-image
							style="width: 200px; height: 200px;margin: 0 auto;"
							:src="require('@/assets/image/me.jpg')"
							fit="cover"></el-image>
						</div>
					</div>
				</div>
			</div>
		</div>
		<br>
		<br>
	</div>
  </div>
</template>

<script>
 export default{
	data() {
		return{
			blog_information:{
				
			},
			circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
			urls:[
				"https://images.unsplash.com/photo-1594590713006-773c056b46ee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTQxfHxzcHJpbmd8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
				'https://images.unsplash.com/photo-1576643389950-64434aa6c7db?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Njd8fHN1bW1lcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
				'https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
				'https://images.unsplash.com/photo-1453306458620-5bbef13a5bca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHdpbnRlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
			],
			tags:["java"]
		}
	},
	created(){
		var that=this
		var blog_id=sessionStorage.getItem("blog_id")
		axios.get("http://"+that.$store.state.host+":8181/blog/findByBlogid/"+blog_id).then(function(res){
			that.blog_information=res.data.map.data
			var tags123=res.data.map.data.tag_
			that.tags=tags123.split("#####")
		})
	},
	methods:{
		// goBack() {
		// 	this.$router.push({path: "/show_blog"});;
		// }
	}
}
</script>

<style>
.blog_head{
	display: flex;
	text-align: center;
	height: 3em;
/* 	justify-content: center; */
	margin: 0 auto;
	}

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  
	.blogs{
		width: 60%; 
		margin: 0 auto; 
		height: auto;
 		background-color: white; 
		border-style:solid ;
		border-width:1px;
		border-color: #afc2b8;
	}
</style>
